/**
 * 事件处理
 *  1. 绑定事件，直接在标签上绑定事件
 *     onclick => onClick
 *     onfoucs => onFoucs
 *     onblur  => onBlur
 *  2. 最好的方式，是将事件处理函数，就写在当前组件内。然后通过 this.xxx 去获取
 *  3. 事件处理函数赋值给某个事件时，不要加括号
 *  4. 事件处理函数中的this指向问题，不是指定当前实例
 */

import React from "react";
import ReactDOM from "react-dom/client";

class App extends React.Component {
  // render是定义在类的原型上的。
  // render是谁调用的？是使用App组件时，React会帮我们做实例化的操作，然后使用实例化的对象主动调用了 render函数，
  // render函数中的this就是当前类的实例对象（组件实例对象）。这个点是React帮我们做了处理
  render() {
    console.log(this);
    return (
      <div>
        <h1>App</h1>
        {/* 
          如下代码，xxx() 会直接被执行，然后返回值是 undefined，将 undefined 赋值给了 onClick。按钮点击没有效果
        */}
        {/* <button onClick={xxx()}>点我，弹窗</button> */}
        <button onClick={this.xxx}>点我，弹窗</button>
      </div>
    );
  }

  // xxx是定义在类的原型上，通过当前类的实例对象可以访问到, 通过当前类的实例对象直接调用的话，里面的this没有问题，就指定当前类的实例对象    this.xxx()
  // 当前这块的 xxx 不是直接调用的，而是当真实的 button 按钮被点击时，内部会去找到绑定在当前元素上的 onClick 属性，用这个属性加括号去调用的，onClick()。
  // 正常来说这个函数体里面的this指向应该时 window。但这里输出是 undefined
  //      原因是，类中的函数，默认都开启了 严格模式
  xxx() {
    console.log(this);
    alert("点击了");
  }
}

// const app = new App();
// console.log(app);

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(
  <>
    <App />
  </>
);

// setTimeout(() => {
//   const btn = document.querySelector("#btn");
//   btn.addEventListener("click", () => {
//     alert("按钮1 被点击le ");
//   });
// });

// function xxx() {
//   alert("点击了");
//   return () => {
//     console.log("123");
//   };
// }
